<template>
  <div>
    <breadcrumb class="breadcrunmb-container"></breadcrumb>
    <el-row class="nav-btn">
      <el-button type="info" size="small" @click="active = 0" :class="active === 0 ? 'active' : ''">商户二维码列表</el-button>
      <!-- <el-button type="info" size="small" @click="active = 1" :class="active === 1 ? 'active' : ''">商户空码</el-button> -->
      <!-- 后续增加此功能 删除注释即可 -->
      <el-button type="info" size="small" @click="active = 2" :class="active === 2 ? 'active' : ''">商户二维码收款情况</el-button>
    </el-row>
    <el-row class="item">
      <code-list v-if="active === 0"></code-list>
      <empty v-else-if="active === 1"></empty>
      <order v-else-if="active === 2"></order>
    </el-row>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import CodeList from './components/shopCode/list'
import Empty from './components/shopCode/empty'
import Order from './components/shopCode/order'
export default {
  name: 'shopCode',
  components: {
    Breadcrumb,
    CodeList,
    Empty,
    Order
  },
  data() {
    return {
      active: 0 // @ 1 二维码列表 2 商户空码 3 二维码收款情况
    }
  }
}
</script>

<style lang='scss' scoped>
  .nav-btn{
    .el-button {
      border-radius: unset;
      padding: 5px 20px;
    }
    .active {
      color: #fff;
      background-color: #ffae00;
      border-color: #ffae00;
    }
  }
  .item{
    padding-top: 20px;
  }
</style>
